<template>
	<view>
		<view class="tabs-box">
			<scroll-view scroll-x style="100%">
				<view class="fx-center">
					<view class="tab-item" :class="tabIndex === -1 ? 'tab-item-active' : ''" @click="changeTab(-1)">全部
					</view>
					<view class="tab-item" :class="tabIndex === index ? 'tab-item-active' : ''"
						v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="circle-list" v-for="item in list" :key="item.id" v-if="list.length>0">
			<view class="fx-center">
				<image :src="avtr" mode="aspectFill" class="avtr-img"></image>
				<view class="fx-center">
					<view class="list-name">{{name}}</view>
					<!-- <van-button plain size="mini"
						custom-style="width:104rpx;font-size:20rpx;height:40rpx;line-height:36rpx;background: #fff;border: 1rpx solid #E2E2E2;color:#8A8F99;font-weight: bold;">今日更新</van-button> -->
				</view>
			</view>
			<view class="list-info">

				<view class="list-content">
					<view class="img-box">
						<image :src="it.url" mode="aspectFill" :class="getClass(item.images_assets)"
							v-for="(it,i) in item.images_assets" :key="i"
							@click.stop="$api.toPrewImgArr(item.images_assets,i)">
						</image>
					</view>
					<view style="white-space: pre-wrap;">{{item.body}}</view>
				</view>
				<view class="list-operation fx-center">
					<view class="copy-text" @click="$api.copyText(item.body)">一键复制文案</view>
					<view class="fx-center opration-item" @click="toDownloadImg(item.images_assets)">
						<image src="/static/downimg_icon.png" mode="heightFix"></image>
						<view class="">下载图片</view>
					</view>
					<view class="fx-center opration-item" @click="shareCircle(item.images_assets,item.body)">
						<image src="/static/sharepyq_icon.png" mode="heightFix"></image>
						<view class="">转发朋友圈</view>
					</view>
				</view>

			</view>
		</view>
		<view class="main-no-data" v-else>
			<image src="/static/empty_img.png" mode="widthFix"></image>
			<view class="">暂无素材</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [],
				tabIndex: -1,
				name: '', //名称
				avtr: '', //头像
				list: [],
				pid: null,
				total: 0,
				page: 1
			};
		},
		onLoad(e) {
			if (e.pid) {
				this.pid = e.pid
			}
			this.getType()
			this.getList()
		},
		computed: {
			getClass() {
				return (arr) => {
					if (arr.length === 1) {
						return 'one-img'
					} else if (arr.length === 2 || arr.length === 4) {
						return 'two-img'
					} else if (arr.length === 3 || arr.length > 4) {
						return 'three-img'
					}
				}
			}
		},
		onReachBottom() {
			if (this.total < this.list.length) {
				this.page++
				this.getList()
			}
		},
		methods: {
			getType() {
				this.$api.requst(`/gwc/projects/material_types`, {
					type: 2
				}).then((res) => {
					this.tabs = res.data
				})
			},
			getList() {
				this.$api.requst(`/gwc/projects/${this.pid}/materials`, {
					page: this.page,
					type_id: this.tabIndex == -1 ? '' : this.tabs[this.tabIndex].id,
					type: 2,
					id: this.pid
				}).then((res) => {
					this.name = res.name
					this.avtr = res.cover
					this.total = res.total
					if (this.page === 1) {
						this.list = res.data
					} else {
						res.data.forEach(item => {
							this.list.push(item)
						})
					}
				})
			},
			changeTab(index) {
				this.tabIndex = index
				this.page = 1
				this.getList()
			},
			// 转发朋友圈
			shareCircle(imgArr, text) {
				this.$api.copyText(text)
				this.toDownloadImg(imgArr)
			},
			// 下载配图
			async toDownloadImg(imgArr) {
				if (imgArr.length > 0) {
					for (let i = 0; i < imgArr.length; i++) {
						await this.$api.downImg(imgArr[i].url)
					}
				} else {
					this.$api.showError('无可下载图片！')
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.tabs-box {
		margin: 16rpx 32rpx 36rpx;
		overflow: auto;

		.tab-item {
			font-size: 30rpx;
			color: #5C5F66;
			margin-right: 64rpx;
			white-space: nowrap;
		}

		.tab-item-active {
			font-weight: bold;
			color: #161616;
		}
	}

	.circle-list {
		padding: 32rpx 24rpx 48rpx;
		background-color: #fff;

		.avtr-img {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 16rpx;
		}

		.list-name {
			font-size: 28rpx;
			color: #5C5F66;
			margin-right: 16rpx;
		}

		.list-info {
			margin-left: 104rpx;
			margin-top: 16rpx;


			.list-content {
				font-size: 32rpx;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #E2E2E2;

				.img-box {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.one-img,
					.two-img,
					.three-img {
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						margin-bottom: 24rpx;
					}

					.one-img {
						width: 464rpx;
						height: 618rpx;
					}

					.two-img {
						width: 292rpx;
						height: 292rpx;
					}

					.two-img:nth-child(2n+1) {
						margin-right: 8rpx;
					}

					.three-img {
						width: 194rpx;
						height: 194rpx;
					}

					.three-img:not(:nth-child(3n)) {
						margin-right: 8rpx;
					}
				}

			}

			.list-operation {
				margin-top: 26rpx;

				.copy-text {
					font-weight: bold;
					background: linear-gradient(331.1722942563499deg, #2571F5 0%, #254DF5 50%, #252CF5 100%);

					/* 文字裁剪背景 */
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

					/* 兼容标准属性 */
					background-clip: text;
					color: transparent;
				}

				.opration-item {
					margin-left: 36rpx;
					font-size: 28rpx;
					color: #5C5F66;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
				}

			}
		}
	}
</style>